Positionnement

CSS approfondi

DSP - USAL33

La propriété position

Valeur Comportement
static Normale (défaut)
relative Relative à sa position normale
absolute Par rapport au parent positionné
fixed Par rapport à la fenêtre
sticky Hybride relative/fixed

Associées : top, right, bottom, left, z-index

relative

.box {
    position: relative;
    top: 20px;
    left: 30px;
}
  • Reste dans le flux (l'espace d'origine est réservé)
  • Crée une référence pour position: absolute

absolute

.parent { position: relative; }
.child  {
    position: absolute;
    top: 10px;
    right: 10px;
}
  • Sort du flux
  • Se cale sur le parent positionné le plus proche (sinon <body>)

Exemple : badge sur une carte

.card {
    position: relative;
    padding: 20px;
}
.badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: red;
    color: white;
}

Le parent relative = cadre ; le badge absolute se loge dedans.

fixed

.header {
    position: fixed;
    top: 0;
    width: 100%;
}
  • Ne bouge pas au scroll · sort du flux
  • Usage : en-têtes fixes, boutons flottants

Penser à compenser : body { padding-top: 60px; }

sticky

.sidebar {
    position: sticky;
    top: 20px;
}
  1. Agit comme relative
  2. Se fige (fixed) au seuil atteint
  3. Redevient relative en fin de conteneur

Usage : sidebars, en-têtes de tableaux

z-index — empilement

.navbar  { position: fixed; z-index: 100; }
.overlay { position: fixed; z-index: 199; }
.modal   { position: fixed; z-index: 200; }
  • Fonctionne avec position ≠ static
  • Plus la valeur est haute, plus c'est au-dessus
  • Convention : valeurs espacées (100, 200, 300…)

Centrage avec absolute

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Alternative plus simple : Flexbox ou Grid.

Récapitulatif

Valeur Flux Référence
static Dans le flux —
relative Dans le flux Sa position normale
absolute Hors du flux Parent positionné
fixed Hors du flux Fenêtre
sticky Dans puis hors Conteneur